<template>
    <div class="product">
        <h4>商品信息</h4>
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(shop, index) in shopList" :key="index">
                    <td>{{shop.id}}</td>
                    <td>{{shop.name}}</td>
                    <td>{{shop.price}}</td>
                    <td>
                        <div @click="addToCart(shop)" class="btn btn-info">购物车</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
// 引入vuex的辅助函数,在computed中使用
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'product',
  data () {
    return {}
  },
  computed: {
    // 通过mapGetters辅助函数将数组shoplist与vuex中state的shoplist对应上
    ...mapGetters(['shopList'])
  },
  methods: {
    // 通过mapActions辅助函数将事件函数addToCart与vuex中action的addToCart对应上
    ...mapActions(['addToCart'])
  }
}
</script>
<style scoped>
    .table-shop > th {
        text-align: center;
    }
    .item-wrapper {
        display: flex;
        background-color: #dfdfdf;
        align-items: center;
        justify-content: center;
    }
    .item{
        flex: 1;
    }
</style>
